<template>
  <div>
    <div class="buttons">
      <div class="buttonGroup1">
        <el-select v-model="value" placeholder="请选择" style="margin-right: 10px">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
        <el-button type="primary" @click="load(1)">查询</el-button>
        <el-button type="info" @click="reset">重置</el-button>
      </div>
    </div>
    <el-table :data="tableData" stripe :header-cell-style="{backgroundColor: 'aliceblue', color: '#666'}"
              style="margin-top: 10px">
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column prop="id" label="序号" width="50" align="center"></el-table-column>
      <el-table-column prop="username" label="账号" align="center"></el-table-column>
      <el-table-column prop="name" label="用户名" align="center"></el-table-column>
      <el-table-column prop="phone" label="电话" align="center"></el-table-column>
      <el-table-column prop="address" label="地址" align="center"></el-table-column>
      <el-table-column label="操作" align="center" width="180">
        <template v-slot="scope">
          <el-button size="mini" type="primary" plain @click="setVisible(scope.row.id)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin: 10px 0">
      <el-pagination
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :hide-on-single-page="hideValue"
          :total="total">
      </el-pagination>
    </div>

    <el-dialog title="考评成绩" :visible.sync="dataVisible">
      <el-card style="margin-bottom: 10px">
        <div v-if="!flag">
          <span>选择考评：</span>
          <el-select v-model="templateValue" placeholder="选择考评" style="margin-right: 5px">
            <el-option
                v-for="item in templateOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div v-if="flag"><span>没有正在进行的考评</span></div>
      </el-card>
      <el-card>
        <el-collapse v-for="item in scoreData">
          <el-collapse-item :title="item.content">
            <el-collapse v-for="items in item.child">
              <el-collapse-item :title="items.content" style="margin-left: 30px">
                <el-collapse v-for="content in items.child" style="margin-left: 30px">
                  <el-collapse-item :title="content.content">
                    <spa>佐证材料（点击标签查看）:</spa><br>
                    <el-tag
                        :key="tag.id"
                        v-for="tag in content.files"
                        :disable-transitions="false"
                        style="margin-right: 5px; margin-top: 5px;cursor: pointer"
                        @click="fileView(tag.path)">
                      <a style="text-decoration: none; color: #001529; cursor: pointer">{{ tag.name }}</a>
                    </el-tag>
                    <div><span>自评：{{ content.score }}</span></div>
                    <div><span>评估组：{{ content.expertScore }}</span></div>
                  </el-collapse-item>
                </el-collapse>
              </el-collapse-item>
            </el-collapse>
          </el-collapse-item>
        </el-collapse>
      </el-card>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dataVisible = false" type="primary">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import request from "@/urils/request";
import {Base64} from "js-base64";

export default {
  name: "Score",
  data(){
    return{
      tableData: [],
      value: '',
      options: [
        {value: 3, label: "高校"},
        {value: 4, label: "中小学"},
      ],
      pageNum: 1,
      pageSize: 7,
      total: 0,
      hideValue: false,
      scoreData: [],
      flag: false,
      templateValue: '',
      templateOptions: [],
      dataVisible: false,
      userName: ''
    }
  },
  methods:{
    fileView(path) {
      var fileName = path.split("/").pop()
      console.log(fileName)
      // var previewUrl = 'http://124.222.214.139:9090/file/download/6c68b1299b714e99a22a3fbf336a28aa.jpg' + '&fullfilename=' + '6c68b1299b714e99a22a3fbf336a28aa.jpg'
      // var previewUrl = 'http://124.222.214.139:9090/file/download/6c68b1299b714e99a22a3fbf336a28aa.jpg' + '&fullfilename=' + '6c68b1299b714e99a22a3fbf336a28aa.jpg'
      var previewUrl = path + '&fullfilename=' + fileName
      window.open("http://124.222.214.139:8012/onlinePreview?url=" + encodeURIComponent(Base64.encode(previewUrl)));
      // window.open('http://124.222.214.139:8012/onlinePreview?url=' + encodeURIComponent(Base64.encode(path)));
    },
    reset() {
      this.value = ''
      this.load()
    },
    handleCurrentChange(pageNum) {
      this.load(pageNum)
    },
    load(pageNum) {  // 分页查询
      if (pageNum) this.pageNum = pageNum
      request.get('/user/selectSchool', {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          identity: this.value === '' ? 0 : this.value
        }
      }).then(res => {
        // console.log(res.data)
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    loadTemplate() {
      request.get('/evaluation/getList').then(res => {
        if (res.code === '200') {
          if (res.data.length === 0) {
            this.flag = true
          } else {
            this.flag = false
            for (let i in res.data) {
              this.templateOptions.push({
                value: res.data[i].templateId,
                label: res.data[i].name
              })
            }
          }
        }
      })
    },
    getData(value) {
      request.get('/criterion/selectAllScore', {
        params: {
          id: value,
          userId: this.userName
        }
      }).then(res => {
        if (res.code === '200') {
          this.scoreData = res.data
        } else {
          console.log(res.msg)
          this.$message.error(res.msg)
        }
      })
    },
    setVisible(value){
      this.dataVisible = true
      this.userName = value
    }
  },
  created() {
    this.load()
    if (this.total === 0) {
      this.hideValue = true
    }
    this.loadTemplate()
  },
  watch: {
    templateValue: function (newVal, oldVal) {
      this.getData(newVal)
    }
  }
}
</script>

<style scoped>

</style>